<script setup lang="ts">
import {onMounted, reactive, ref,watch} from "vue";
import {useRouter} from "vue-router";
import language from "@/lang/zh";
import { ElMessage } from "element-plus";
import emitter from '../bus.js';


const props = defineProps({
  Lang: {
    type: Boolean,
    default: "",
  },
  isDisabled: {
    type: Boolean,
    default: "",
  },

});
interface IState {

  userInfo: any
}
// 定义tref
const state: IState = reactive({
  userInfo: {
    username:""
  }
});
// 判断是否禁止操作
const isForbidden = () => {
  if (props.isDisabled) {
    ElMessage.warning("请先结束回答");
    return true;
  }else{
    return false;
  }
};
const selectedIndex = ref(0) // 默认选中第一个链接

const handleMessage = (data) => {

  selectedIndex.value = data.index;
    };

    onMounted(() => {
      emitter.on('message', handleMessage);
    });

// 响应式变量，用于记录当前选中的边框栏


// 路由实例

const router = useRouter()
// 菜单列表
const menuItemsEN = ref([
  {
    icon: require("@/assets/images/dialogue.png"),
    title: language.messageEN.conversation,
    route: '/home'
  },
  {
    icon: require("@/assets/images/aiPlaza.png"),
    title: language.messageEN.aiPlaza,
    route: '/home/square'
  },
],)
const menuItemsZH = ref([
  {
    icon: require("@/assets/images/dialogue.png"),
    title: language.messageZH.conversation,
    route: '/home'
  },
  {
    icon: require("@/assets/images/aiPlaza.png"),
    title: language.messageZH.aiPlaza,
    route: '/home/square'
  },
],)
// 定义自定义事件
const emit = defineEmits(['handChange']);
// 点击某个边框栏时，更新选中的边框栏，并跳转到对应的链接
const handleClick = (index:number, route:string) => {
    selectedIndex.value = index
    emit('handChange', index); 
    router.push(route) // 跳转到对应的路由
}
</script>

<template>
  <div class="bar-container">
    <!--    背景白色透明蒙版-->
    <span class="transparent-bg"></span>
    <!--    侧边栏-->
    <div class="sidebar">
      <!-- <div class="sidebar-header">
      
        <img :src="require('@/assets/images/robot1.png')" alt="小助手" />
      </div> -->
      <!--      侧边栏列表-->
      <div class="sidebar-links" v-if="props.Lang">
        <span id="link" v-for="(item, index) in menuItemsEN" :key="index"
          :class="{ 'selected': selectedIndex === index }" @click="isForbidden() ? '' : handleClick(index, item.route)">
          <span class="link-img">
            <img :src="item.icon" :alt="item.title" />
          </span>
          <span class="link-name">{{ item.title }}</span>
        </span>
      </div>
      <div class="sidebar-links" v-else>
        <span id="link" v-for="(item, index) in menuItemsZH" :key="index"
          :class="{ 'selected': selectedIndex === index }" @click="isForbidden() ? '' : handleClick(index, item.route)">
          <span class="link-img">
            <img :src="item.icon" :alt="item.title" />
          </span>
          <span class="link-name">{{ item.title }}</span>
        </span>
      </div>
      <div class="sidebar-footer">
        <!-- 用户头像 -->
        <!-- <span class="userInfo" @click="isForbidden() ? '' : () => router.push('/userInfo')">
          <span class="user-img">
            <img />
            <img :src="require('@/assets/images/avatar.png')" alt="用户头像" />
          </span>
          <span class="username">{{ state.userInfo.username }}</span>
        </span> -->
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.bar-container {
  color: #FFF;
  font-size: 12px;
  width: 100%;
  height: 100vh;
  padding: 24px 24px 24px 0;
  position: fixed;
  background: #1196DB;
  min-width:1400px;

  // background: linear-gradient(
  //     10deg,
  //     rgba(255, 177, 177, 1),
  //     rgba(92, 178, 255, 1)
  // )!important;
}

.transparent-bg {
  min-width:1400px;
  background: linear-gradient(
      107deg,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(255, 255, 255, 0.30) 98.63%
  );
}

.sidebar {
  display: flex;
  background-color: rgba(255, 255, 255, 0);
  width: 5%;
  min-width:100px;
  height: 100%;
  padding: 14px 0;
  text-align: center;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;

  span {
    display: block;
  }

  .sidebar-header {
    width: 50px;
    height: 50px;
    margin-bottom: 50px;
  }

  .sidebar-links {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    #link {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .link-img {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      .link-img
      img {
        width: 60%;
        height: 60%;
      }

      .link-name {
        width: 100%;
        display: block;
        margin: 2px auto 50px;
      }
    }
  }
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar-footer {
  width: 100%;
  .username{
    text-align: center;
    padding: 0 8px;
    display: block;
    width: 100%;
    word-break: break-all;
    white-space: wrap;
  }
  .user-img{
    margin: 0 auto;
    width: 50px;
  }
  .userInfo:hover {
    cursor: pointer;
  }
}

.selected {
  .link-img {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
  }
}
#link:hover{
  cursor: pointer;
  .link-img{
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
  }
}
</style>